<template>
  <div>
    <h1>新闻分类管理</h1>
    <div style="width: 90%; display: flex; flex-direction: row; justify-content: flex-end; margin: 20px;">
      <el-button type="success" @click="dialogFormVisible = true">新增分类</el-button>
    </div>
    <MyTable ref="myTable" :params="tables"></MyTable>


    <!-- 弹出框 -->
    <el-dialog title="新增分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.tName" autocomplete="off" placeholder="请输入新闻分类的名"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertType()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import MyTable from "./MyTable"

  export default {
    components: {
      MyTable
    },
    data() {
      return {
        //弹出框的属性
        dialogFormVisible: false,
        formLabelWidth: '120px',
        //表单数据
        form: {
          tName: null
        },
        //表格组件需要的参数对象
        tables: {
          //表头数组
          cols: [
            {prop: "id", label: "编号"},
            {prop: "tname", label: "分类名称"},
            {prop: "tcount", label: "新闻数量"}
          ],
          //请求的参数
          request: {
            //表格请求的url
            url: "/newsType/list",
            //请求的数据
            data: {
            }
          },
          //需要进行的操作
          actions:[
            {btnName: "修改", action: (row) => {
              console.log("修改按钮被点击了....", row);
            }},
            {btnName: "删除", action: (row) => {
              console.log("删除按钮被点击了....", row);
            }}
          ]
        }
      }
    },
    methods: {
      //新增分类
      insertType(){
        this.$.ajax({
          type:"POST",
          url: "/newsType/insert",
          data: this.form,
          success: (result) => {
            console.log("新增成功....");

            //刷新表格
            this.$refs.myTable.requestList();
            //关闭弹窗
            this.dialogFormVisible = false;
          }
        });
      }
    }
  }
</script>

<style>
</style>
